<template>
	<view :class="['o-cell', size, {'card':card}]">
		<view v-if="title" class="o-title"> {{title}} </view>
		<view v-else class="py-1"></view>
		<view class="o-sub"> <slot /> </view>
	</view>
</template>

<script>
	export default {
		name:'oCell',
		// #ifdef MP-WEIXIN
		options:{virtualHost:true},
		// #endif
		
		props:{
			title:{
				type:String,
				default:''
			},
			border:{
				type:Boolean,
				default:false
			},
			size:{
				type:String,
				default:''  // lg
			},
			card:{
				type:Boolean,
				default:false
			}
		},
		provide(){
			return{
				oCell:this
			}
		},
	}
</script>

<style lang="scss">
	.o-cell{position:relative;}
	.card{
		padding: 16rpx;
		.o-sub{
			border-radius: 16rpx;
			overflow: hidden;
		}
		.o-title{
			margin-left: -16rpx;
			margin-top: -16rpx;
		}
	}
	.o-title{
		font-size: 28rpx;
		color: #999;
		font-weight: 500;
		padding:32rpx 0 20rpx 36rpx;
		position: relative;
		&::before{
			position: absolute;
			content:'';z-index:2;
			left:16rpx;bottom:24rpx;
			height:26rpx;width:8rpx;
			border-radius:30px;
			background-color:#999;
		}
	}
	.py-1{padding:10rpx 0;}
</style>
